// 待办工单 -》 通信光缆巡视 -》 光缆信息完善
<template>
  <div class="complete-wrap">
    <nav-bar class="header" back title="完善光缆信息" @goBack="goBack" />
    <div class="main-container">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />

      <div class="base-info-container">
        <div v-for="(item, index) in currentData.visibleProps" :key="index">
          <!-- 不可编辑框 -->
          <van-field v-if="item.elementType === 'TEXT'" :required="item.isRequired" readonly input-align="right" :right-icon="item.disabled ? '' : 'arrow'" :value="item.value" :label="item.title"
                     placeholder="点击选择" @click="checkInfo(item)" />
          <!-- 弹出筛选框 -->
          <van-field v-if="item.elementType === 'PICKER'" :required="item.isRequired" readonly clickable input-align="right" right-icon="arrow" v-model="item.text" :label="item.title"
            placeholder="点击选择" @click="checkPickerList(item)" />
          <!-- 弹出日期筛选框 -->
          <van-field v-if="item.elementType === 'TIMEPICKER'" :required="item.isRequired" readonly clickable input-align="right" right-icon="arrow" v-model="item.text" :label="item.title"
            placeholder="点击选择" @click="checkPickerList(item)" />
          <!-- 输入框 -->
          <van-field v-if="item.elementType === 'INPUT'" :required="item.isRequired" clickable input-align="right" :value="item.value" :label="item.title" placeholder="请输入"
            @input="inputBlur($event, item)" />
        </div>
        <!--        <van-cell-group>-->
        <!--          -->
        <!--          <van-field-->
        <!--            value="省公司至侯村站一号光缆"-->
        <!--            label="光缆名称"-->
        <!--            readonly-->
        <!--            input-align="right"-->
        <!--          />-->
        <!--        </van-cell-group>-->
      </div>

      <plateTitle title="巡视信息" :isRequired="false" class="plate-title" />

      <!-- 巡视照片 -->
      <view class="patrol-info-container">
        <view>巡视照片</view>
        <van-divider dashed />
        <div class="image-wrap">
          <div class="image-list">
            <div
              class="upload-button"
              v-for="(imgItem, index) in files"
              :style="{'background-image': `url(${imgItem.bgImg})`}"
              @click.stop="imageHandle(imgItem, index, 'CHOOSE')"
            >
              <div v-if="imgItem.img" class="delete-icon" @click.stop="imageHandle(imgItem, index, 'DELETE')">×</div>
              <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
            </div>
          </div>
        </div>
      </view>

      <!-- 备注 -->
      <view class="remark-info-container">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" v-model="currentData.otherProps.REMARK">
          </textarea>
        </div>
      </view>

      <view class="result-info-container">
        <van-cell-group v-for="(item, index) in currentData.tourInfoProps" :key="index">
          <!-- 不可编辑框 -->
          <van-field v-if="item.elementType === 'TEXT'" :required="item.isRequired" readonly input-align="right" :value="item.value" :label="item.title" />
        </van-cell-group>
      </view>

      <van-button block @click="upload">保存</van-button>

    </div>
    <!--选择器-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        :default-index="defaultPickerIndex"
        show-toolbar
        :columns="currentPickerList"
        cancel-button-text="清空"
        @confirm="pickerConfirm"
        @cancel="pickerEmpty" />
    </van-popup>

    <!--选择站点-->
    <van-popup v-model="showSite" position="right">
      <select-site @cancel="siteCancel" :selected.sync="siteKeys" />
    </van-popup>

    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </div>
</template>

<script>
import config from "../../../../common/config";
import navBar from '../../../../components/common/nav-bar'
import plateTitle from '../../../../components/business/plateTitle'
import selectSite from '../../../common/selectSite'
import moment from 'moment'
import { mapGetters } from 'vuex'
import { merge } from "lodash";

import axios from 'axios'
import {Dialog, Toast} from "vant";
import wx from "../../../../static/common_js/jweixin_1.0.0";

let infoOptical = {
  otherProps: {
    REMARK: '' //备注
  },
  tourInfoProps: {
    // 显示的属性。包含巡视人和巡视时间
    tourOperName: {
      title: '巡视人',
      keys: 'tourOperName',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    }, //设备名称
    tourTimStr: {
      title: '巡视时间',
      keys: 'tourTimStr',
      value: '',
      isRequired: false,
      elementType: 'TEXT'
    } //所属站点名称
  },
  hideProps: {
    taskId: '', //所属工单id    //必填
    objId: '', // 巡视id
    optId: '', // 光缆本身id
    fiberId: '', // 光缆id
    aResobjid: '', //起始站点id
    zResobjid: '', // 终止站点id
    tourOperId: '', //巡检人ID  必填      userId放进来
    tourOperName: '', //巡检人名称    必填       userName放进来
    tourTim: '', //巡检时间 必填
    serviceState: '' // 设备状态
  },
  visibleProps: {
    // 显示的属性 keys-提交时对应字段 displayKey-用于回显的字段
    // "NAME": {
    //   title: "光缆名称",
    //   displayKey: "NAME",
    //   keys: "name",
    //   value: "",
    //   isRequired: true,
    //   elementType: "TEXT"
    // }, //光缆名称
    A_SITE_NAME: {
      title: '起点名称',
      keys: 'aResname',
      displayKey: 'A_SITE_NAME',
      value: '',
      isRequired: true,
      disabled: false,
      elementType: 'TEXT'
    }, //起始站点名称
    Z_SITE_NAME: {
      title: '终点名称',
      keys: 'zResname',
      displayKey: 'Z_SITE_NAME',
      value: '',
      text: '',
      isRequired: true,
      disabled: false,
      elementType: 'TEXT'
    }, //终止站点名称
    OPTICALORDER: {
      title: '光缆顺序',
      displayKey: 'OPTICALORDER',
      keys: 'opticalorder',
      value: '',
      isRequired: true,
      elementType: 'PICKER',
      optionsParams: { kdCode: 'OPTICALORDER' }
    }, //光缆顺序
    VOLTAGE_CLASS: {
      title: '电压等级',
      displayKey: 'VOLTAGE_CLASS',
      keys: 'voltageClass',
      value: '',
      isRequired: true,
      elementType: 'PICKER',
      optionsParams: { kdCode: 'DYDJ' }
    }, //电压等级
    FIBER_TYPE: {
      title: '光缆种类',
      displayKey: 'FIBER_TYPE',
      keys: 'fiberType',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'PICKER',
      optionsParams: { kdCode: 'FIBERTYPE' }
    }, //光缆种类
    POWER_LINE: {
      title: '所属线路',
      displayKey: 'POWER_LINE',
      keys: 'powerLine',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'INPUT'
    }, //所属线路
    LENGTH: {
      title: '光缆长度(Km)',
      displayKey: 'LENGTH',
      keys: 'length',
      value: '',
      text: '',
      isRequired: false,
      elementType: 'INPUT'
    }, //光缆长度
    LINE_NUMBER: {
      title: '纤芯总数',
      displayKey: 'LINE_NUMBER',
      keys: 'lineNumber1',
      value: '',
      text: '',
      isRequired: true,
      disabled: false,
      elementType: 'PICKER',
      optionsParams: { kdCode: 'CORENUMBER' } // 获取options需要的参数
    }, //纤芯总数
    RUN_STATE: {
      title: "运行状态",
      displayKey: "RUN_STATE",
      keys: "runState",
      value: "",
      text: "",
      isRequired: true,
      disabled:false,
      elementType: "PICKER",
      optionsParams: {kdCode: "DYZT"} // 获取options需要的参数
    }, //运行状态

  }
}

let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "铭牌照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../static/img/bg_mingpai.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
export default {
  components: { navBar, plateTitle, selectSite },
  data() {
    return {
      titlePhoto:'设备照片',
      baseUrl: "", // 基础url
      taskId: '', // 工单id
      tourId: '', // 巡视id
      fiberId: '', // 光缆id
      rawLineNumber: '', // 初始纤芯总数
      currentTab: 'cable', // 当前显示内容 fibre 纤芯
      currentData: {}, // 当前光缆信息
      currentChangeItem: '', // 当前正在修改的下拉项
      showSite: false, // 是否展示站点选择popup
      siteKeys: [], // 站点
      currentPickerList: [], // 当前弹出框的列表
      showPicker: false, // 是否显示picker弹出框（表单）
      files: [], // 图片列表
      delList: [], // 被删除的列表，需要和后台交互
      showPreview: false,
      resultInfoData: [
        {
          title: '巡视人',
          value: '张三'
        },
        {
          title: '巡视时间',
          value: '2022-02-14 15：00'
        }
      ],
      reTourCheck: '', // 巡视-1 重新编辑-0
      defaultPickerIndex: 0, // picker默认选中索引
      inspectionRes:'',//控制纤芯总数
      fiberCheck:'',//控制线芯核查
    }
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {
    siteKeys: {
      handler: function (newVal) {
        if (this.currentChangeItem === 'aResname') {
          this.currentData.hideProps['aResobjid'] = newVal.siteId
          this.currentData.visibleProps['aResname'].value = newVal.siteName
        } else if (this.currentChangeItem === 'zResname') {
          this.currentData.hideProps['zResobjid'] = newVal.siteId
          this.currentData.visibleProps['zResname'].value = newVal.siteName
        }
      },
      immediate: true,
      deep: true
    }
  },
  onLoad(options) {
    this.reTourCheck = options.reTourCheck !== undefined ? options.reTourCheck : '1';
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.currentData = JSON.parse(JSON.stringify(infoOptical))
    this.currentData.tourInfoProps = {
      tourOperName: {
        title: '巡视人',
        keys: 'tourOperName',
        value: this.userData.userName,
        isRequired: false,
        elementType: 'TEXT'
      }, //设备名称
      tourTimStr: {
        title: '巡视时间',
        keys: 'tourTimStr',
        value: moment().format('YYYY-MM-DD HH:mm:ss'),
        isRequired: false,
        elementType: 'TEXT'
      } //所属站点名称
    }
    this.currentData.hideProps = {
      optId: '', // 光缆本身id
      taskId: options.taskId, //所属工单id    //必填
      objId: options.tourId, // 巡视id
      // fiberId: options.fiberId, // 光缆id
      aResobjid: '', //起始站点id
      zResobjid: '', // 终止站点id
      tourOperId: this.userData.userId, //巡检人ID  必填      userId放进来
      tourOperName: this.userData.userName, //巡检人名称    必填       userName放进来
      tourTim: moment().format('YYYY-MM-DD HH:mm:ss') //巡检时间 必填
    }
    this.files = JSON.parse(JSON.stringify(fileTemplate));
    // 核查同步过后带来对端光缆的信息
    if(options.frontFiberInfo !== undefined) {
      let frontFiberInfo = JSON.parse(options.frontFiberInfo);
      this.initData(frontFiberInfo);
    }
    // 核查未同步对端信息，查询本端信息
    else {
      this.$api
        .getFiberMsgLineExam({fiber_exam_id: options.tourId})
        .then(res => {
          this.initData(res.data.fiberMsg);
        });
    }

  },
  methods: {
    goBack() {
      if(this.reTourCheck === '0') {
        uni.navigateBack();
      }
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/cableInspect?fiberId=${this.currentData.hideProps.fiberId}&tourId=${this.currentData.hideProps.objId}`
      })
    },
    // 回显渲染
    initData(info) {
      console.log(info,4224)
      this.inspectionRes = info.SERVICE_STATE
      this.fiberCheck = info.coreIsExam
      this.currentData.hideProps.optId = info.OPT_ID;
      // 第一次巡视（SERVICE_STATE不存在），设备状态默认为更新（4）
      this.currentData.hideProps.serviceState = info.SERVICE_STATE === undefined ? 4 : info.SERVICE_STATE;
      this.rawLineNumber = info.LINE_NUMBER;
      Object.keys(this.currentData.visibleProps).forEach(key => {
        if (this.currentData.visibleProps[key].elementType === 'PICKER') {
          this.currentData.visibleProps[key].text = info[key] ? info[key] : '';
          this.currentData.visibleProps[key].value = info[key+"_CODE"] ? info[key+"_CODE"] : '';
        }
        else if(this.currentData.visibleProps[key].elementType === 'TIMEPICKER') {
          this.currentData.visibleProps[key].text = info[key] ? info[key] : '';
        }
        else {
          this.currentData.visibleProps[key].value = info[key] ? info[key] : '';
        }
      })
      console.log(this.currentData.visibleProps, 'this.currentData.visibleProps');
      Object.keys(this.currentData.otherProps).forEach(key => {
        this.currentData.otherProps[key] = info[key] ? info[key]: '';
      })
      // 存在站点信息时，站点信息不可编辑
      if(info.A_SITE_ID !== undefined) {
        this.currentData.up.aResobjid = info.A_SITE_ID //起始站点id
        this.currentData.visibleProps.A_SITE_NAME.disabled = true
      }
      if (info.Z_SITE_ID !== undefined) {
        this.currentData.hideProps.zResobjid = info.Z_SITE_ID; // 终止站点id
        this.currentData.visibleProps.Z_SITE_NAME.disabled = true;
      }
      // 重新编辑时纤芯数不可改
      if(this.reTourCheck === '0') {
        this.currentData.visibleProps.LINE_NUMBER.disabled = true;
      }
      this.files = this.files.map((item) => {
        return {
          ...item,
          img: info.photoMap[item.type] ? this.baseUrl + info.photoMap[item.type]: '',
        }
      })
    },
    // 取消选择站点
    siteCancel() {
      this.showSite = false
    },
    // 可以进行选择的东西
    checkInfo(item) {
      if(item.disabled === true) {
        return;
      }
      if (item.displayKey === 'A_SITE_NAME') {
        // 起始站点id
        this.siteKeys = {
          siteId: this.currentData.hideProps['aResobjid'],
          siteName: this.currentData.visibleProps.A_SITE_NAME.value
        }
        this.currentChangeItem = item.displayKey
        this.showSite = true
      } else if (item.displayKey === 'Z_SITE_NAME') {
        // 终止站点id
        this.siteKeys = {
          siteId: this.currentData.hideProps['zResobjid'],
          siteName: this.currentData.visibleProps.Z_SITE_NAME.value
        }
        this.currentChangeItem = item.displayKey
        this.showSite = true
      }
    },
    // 弹出式选择框（新增业务）
    checkPickerList(optionItem) {
      console.log(optionItem)
      // 4.13新提需求：完善时，不可进行线芯数的修改，重新编辑时，可进行线芯数修改
      if(this.inspectionRes == '3' && this.fiberCheck == '0') {
        optionItem.disabled = false
      }else {
        optionItem.disabled = true
      }
      if(optionItem.disabled === true && optionItem.displayKey ==="LINE_NUMBER") {
        Toast(optionItem.title+'不可修改,如需修改请联系运维人员')
        return;
      }
      this.currentChangeItem = optionItem.displayKey
      // 获取可选列表
      this.$api.todoTaskApi
        .selectList_Optical(optionItem.optionsParams)
        .then(res => {
          this.currentPickerList = res.data.list.map((item, index) => {
            if (item.NAME === this.currentData.visibleProps[this.currentChangeItem].text) {
              this.defaultPickerIndex = index;
            }
            return {
              origin: item,
              text: item.NAME,
              value: item.BRIEFNAME
            }
          })
          this.showPicker = true
        })
    },
    // picker确认选择(所有下拉)
    pickerConfirm(selectedOption) {
      // 选择的纤芯总数小于当前时，不可修改
      if(this.currentChangeItem === 'LINE_NUMBER' && +selectedOption.value < +this.rawLineNumber) {
        Dialog.alert({
          title: '修改失败',
          message: '该纤芯总数不应小于原纤芯总数，请重新编辑',
          confirmButtonText: '重新编辑',
          theme: 'round-button',
        })
        this.showPicker = false
        return
      }
      this.currentData.visibleProps[this.currentChangeItem].text =
        selectedOption.text
      this.currentData.visibleProps[this.currentChangeItem].value =
        selectedOption.value
      this.showPicker = false
    },
    // 清空已选
    pickerEmpty(selectedOption) {
      this.showPicker = false
      selectedOption.text = ''
      selectedOption.value = ''
      this.currentData.visibleProps[this.currentChangeItem].text = ''
      this.currentData.visibleProps[this.currentChangeItem].value = ''
    },
    // 为输入框时失去焦点采集输入值
    inputBlur(value, item) {
      this.currentChangeItem = item.displayKey
      this.currentData.visibleProps[this.currentChangeItem].value = value
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    choosePhoto(imgItem, imgIndex) {
      let _this = this;
      wx.chooseImage({
        count: 3,
        sourceType: ["camera"],
        success: (chooseImageRes) => {
          wx.getLocalImgData({
            localId: chooseImageRes.localIds[0].toString(),
            success: function (res) {
                const localData = res.localData;
                let imageBase64 = '';
                if (localData.indexOf('data:image') == 0) {
                    //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                    imageBase64 = localData;
                } else {
                    //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                    //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                    imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                }

                _this.$set(_this.files, imgIndex, merge(_this.files[imgIndex], {
                   raw: _this.h5_url_to_blob(imageBase64),
                   img: imageBase64
                }));


                if (_this.delList.includes(imgItem.type)) {
                  _this.delList = _this.delList.filter(item => {
                    if (item === imgItem.type) {
                      return false;
                    }

                    return true;
                  });
                }
            }
          });
        },
        fail: (error) => {
          console.log(error);
        }
      });
    },
    h5_url_to_blob(url) {
      let arr = url.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 提交信息交互
    addOptical() {
      let params = {
        reTourCheck: this.reTourCheck, // 巡视-1 重新编辑-0
        ...this.userData,
        ...this.currentData.hideProps,
        ...Object.values(this.currentData.visibleProps).reduce((prev, item) => {
          prev[item.keys] = item.value
          return prev
        }, {}),
        ...Object.values(this.currentData.tourInfoProps).reduce(
          (prev, item) => {
            prev[item.keys] = item.value
            return prev
          },
          {}
        ),
        ...this.currentData.otherProps
      }
      console.log('params:', params);

      // 验证
      for (let paramsKey in this.currentData.visibleProps) {
        // 必填项验证
        if (this.currentData.visibleProps[paramsKey].isRequired && !this.currentData.visibleProps[paramsKey].value) {
          Dialog.confirm({
            message: `${this.currentData.visibleProps[paramsKey].title}未填写，请重新填写后提交`,
            showCancelButton: false,
          })
          return;
        }
      }

      let param = new FormData() // 创建form对象
      this.files.forEach((file) => {
        if (file.raw) {
          param.append('files', file.raw, file.name)
        }
      });
      Object.keys(params).forEach(itemKey => {
        param.append(itemKey, params[itemKey]) // 添加form表单中其他数据
      })
      // param.append('files', this.filesRaw[0], '测试')  // 通过append向form对象添加数据
      // 添加请求头
      let config = {
        headers: { 'Content-Type': 'multipart/form-data',Authorization: uni.getStorageSync('token') || '' }
      }
      let url = "";
      // #ifndef IGW
      url = "/ap/txksh/kosinManage/rest/api/opticalcable/updateDtAppTaskDetOpt";
      // #endif
      // #ifdef IGW
      url = `${this.baseUrl}/txksh/kosinManage/rest/api/opticalcable/updateDtAppTaskDetOpt`
      // #endif

      Toast.loading({
        duration:0,
        message: '加载中...',
        forbidClick: true,
      })

      axios
        .post(
          url,
          param,
          config
        )
        .then(response => {
          Toast.clear()

          if(response.data.code === 0) {

            // 如果当前为巡视，且返回data为0，表示重复巡视
            if(this.reTourCheck === '1' && response.data.data === 0) {
              Dialog.confirm({
                message: "该光缆已被巡视，请返回重试",
              }).then(() => {
                uni.navigateTo({
                  url: `/pages/workBench/todoTask/cableTour/cableTour?taskId=${this.currentData.hideProps.taskId}`
                });
              });
            }

            // 设备名称重复
            else if(response.data.data === 2) {
              Dialog.confirm({
                message: "该光缆已存在，请重新填写",
                showCancelButton: false,
              }).then(() => {});
            }

            else {
              Dialog.confirm({
                message: '保存成功，是否继续核查纤芯',
                confirmButtonText: '继续核查',
                cancelButtonText: '返回列表'
              })
                .then(() => {
                  uni.navigateTo({
                    url: `/pages/workBench/todoTask/cableTour/cableDetail/cableDetail?tourId=${this.currentData.hideProps.objId}`
                  })
                })
                .catch(() => {
                  uni.navigateTo({
                    url: `/pages/workBench/todoTask/cableTour/cableTour?taskId=${this.currentData.hideProps.taskId}`
                  })
                });
            }

          }

          else {
            Dialog.alert({
              message: '操作失败',
              theme: 'round-button',
            });
          }

        })
    },
    upload() {
      this.addOptical()
    }
  }
}
</script>

<style scoped lang="scss">
.complete-wrap {
  min-height: 100vh;
  background-color: #f8f8f8;
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }

  .main-container {
    //width: 100vw;
    //height: 100vh;
    padding: px2vh(30) px2vw(30) px2vh(90) px2vw(30);
    /deep/.van-field__label,
    /deep/.van-field__control:read-only,
    /deep/.van-field__body .van-field__control{
      font-size: px2vw(42);
    }

    .base-info-container,
    .result-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;
    }

    .result-info-container {
      margin-top: px2vh(30);
    }

    .plate-title {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }

    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    }

    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;
      margin-top: px2vh(30);
      .remark-wrap {
        background-color: #fafafa;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        .remark-text {
          height: px2vh(150);
        }
      }
    }

    .patrol-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;

      /deep/.van-radio {
        margin-right: px2vw(139.5);
      }

      .image-wrap {
        width: 100%;
        display: flex;
        img {
          width: px2vw(215);
          height: px2vw(215);
          margin-right: px2vw(40);
          border-radius: px2vw(6);
        }

        .image-list {
          width: 100%;
          display: flex;
          .upload-button {
            width: px2vw(215);
            height: px2vw(215);
            background-size: cover;
            margin-right: px2vw(40);
            position: relative;
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }

    /deep/.van-button {
      margin-top: px2vh(70);
      height: px2vh(120);
      color: #fff;
      background-color: #417adc;
      border: 1px solid #417adc;
      border-radius: px2vh(60);
    }
    /deep/.van-uploader__upload-icon {
      text-align: center;
    }
  }
}
</style>
